<template>
  <div class="areabox">
    <!-- 预览模式 -->
    <div v-if="preview" class="preview-text">
      {{ displayText }}
    </div>
    <!-- 编辑模式 -->
    <template v-else>
      <el-select v-model="address.province" placeholder="请选择省"
                 :style="{ width: `${prop.width}px`, marginRight: `${prop.gap}px` }" @change="handleProvinceSelect">
        <el-option v-for="item in regionData" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="address.city" placeholder="请选择市" :disabled="!address.province || cityList.length === 0"
                 :style="{ width: `${prop.width}px`, marginRight: `${prop.gap}px` }" @change="handleCitySelect">
        <el-option v-for="item in cityList" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="address.area" placeholder="请选择区" :style="{ width: `${prop.width}px` }"
                 :disabled="!address.province || !address.city || areaList.length === 0" @change="handleAreaSelect">
        <el-option v-for="item in areaList" :label="item.label" :value="item.value" />
      </el-select>
    </template>
  </div>
</template>

<script setup>
import { regionData, codeToText } from 'element-china-area-data'
import { ref, reactive, computed, watch } from 'vue'

const prop = defineProps({
  gap: {
    type: [String, Number],
    default: '8'
  },
  width: {
    type: [String, Number],
    default: '100'
  },
  modelValue: {
    type: Object,
    default: () => ({})
  },
  preview: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

let address = reactive({
  province: '',
  city: '',
  area: ''
})

// 监听 modelValue 变化，更新内部状态
watch(() => prop.modelValue, (newVal) => {
  if (newVal) {
    address.province = newVal.province || ''
    address.city = newVal.city || ''
    address.area = newVal.area || ''
  }
}, { immediate: true })

// 更新父组件的 modelValue
const updateModelValue = () => {
  emit('update:modelValue', {
    province: address.province,
    city: address.city,
    area: address.area
  })
}

// 切换省份函数
const handleProvinceSelect = () => {
  address.city = ''
  address.area = ''
  updateModelValue()
}

// 切换城市函数
const handleCitySelect = () => {
  address.area = ''
  updateModelValue()
}

// 切换地区函数
const handleAreaSelect = () => {
  updateModelValue()
}

// 二级城市列表
const cityList = computed(() => {
  if (!address.province) { return [] }
  let temp = regionData.find((item) => {
    return item.value === address.province
  })
  return temp.children ? temp.children : []
})

// 三级地区列表
const areaList = computed(() => {
  if (!address.province || !address.city) { return [] }
  if (cityList.value.length === 0) {
    return []
  } else {
    let temp = cityList.value.find((item) => {
      return item.value === address.city
    })
    if (temp) {
      return temp.children ? temp.children : []
    } else {
      return []
    }
  }
})

// 预览模式下显示的文字
const displayText = computed(() => {
  const texts = []
  if (address.province) texts.push(codeToText[address.province])
  if (address.city) texts.push(codeToText[address.city])
  if (address.area) texts.push(codeToText[address.area])
  return texts.join(' ')
})
</script>

<style scoped>
.areabox {
  display: flex;
  align-items: center;
}
.preview-text {
  font-size: 14px;
  color: #333;
}
</style>